{% extends 'home/pub/base.html' %}

{% block zidingyi %}
<link rel="stylesheet" type="text/css" href="./static/home/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="./static/home/public/css/cart-app.css">


<link rel="stylesheet" type="text/css" href="./static/home/public/css/css.css">
<script type="text/javascript" src="./static/home/public/js/jquery-1.7.2.min.js"></script>

{% endblock %}


{% block mbx %}
<div class="navbar-left">
    <ol class="breadcrumb">
        <li>购物车</li>
        <li class="active">确认订单</li>
        <li>在线支付</li>
        <li>完成 </li>
    </ol>
</div>
{% endblock %}


<br><br><br><br>
{% block content %}
<br><br><br><br>
<!--订单地址-->
<div class="mainbody cart">
		<div class="container">
            <h4>收货信息:</h4>
            <div class="cart-merchant-list">
                <div class="Caddress">
                    <div class="open_new">
                        <button class="open_btn" onclick="javascript:onclick_open();">使用新地址</button>
                    </div>

                    <!--for 遍历地址-->
					{% for i in address %}
                    <div class="add_mi" addressid="{{ i.id }}" moren="{{ i.status }}"
						 {% if i.status == 1 %}
						 style="background: url(&quot;./static/home/public/img/mail_1.jpg&quot;) no-repeat;">
						 {% else %}
						 style="background: url(&quot;./static/home/public/img/mail.jpg&quot;) no-repeat;">
						 {% endif %}
                        <p style="border-bottom:1px dashed #ccc;line-height:28px;">收货人:{{ i.addname }}</p>
                        <p>收货地址:{{ i.adds }} {{ i.addphone }}</p>
                    </div>
					{% endfor %}

                </div>
            </div>


			<!-- 购物车详情头 -->
			<table class="cart-header">
				<tbody>
					<tr>
						<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品缩略图</td>
						<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品名称</td>
						<td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
						<td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
						<td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
					</tr>
				</tbody>
			</table><!-- 购物车详情头 E-->

			<!-- 购物清单信息列表 -->
			<div class="cart-merchant-list">
				<div class="cart-merchant">
					<table class="cart-merchant-body">
						<tbody>
                            <!--for循环开始,订单信息已经存入session['order']中,遍历出来即可-->
							{% for i in request.session.order.values %}
							<tr class="cart-product" id="pro5">
								<td class="cart-col-select col-md-3 col-xs-4 col-sm-4">
									<div class=" checked"></div>
									<a href="{% url 'goodsinfo' i.id %}" class="cart-product-link" target="_blank">
										<img src="{{ i.pic }}" class="cart-product-img" alt="">
									</a>
								</td>
								<td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
									<a href="{% url 'goodsinfo' i.id %}" class="cart-product-link" target="_blank">
									  <p>{{ i.title }}</p>
									  <span class="cart-product-desc">全网通公开版 流光金 32GB</span>
									</a>
									<p class="">
										<span class="cart-product-price">{{ i.price }}</span>
									</p>
									<div class="cart-col-number">
										<div class="cart-product-number-adder">
											<p class="cart-product-number-max show"></p>
											<div class="mz-adder">

												<div class="mz-adder-num" disabled><input class="mz-adder-input" value="{{ i.num }}" type="text"></div>

											</div>
										</div>
									</div>
								</td>
								<td class="cart-col-price col-md-2 hidden-xs hidden-sm">
									<p>

										<span class="cart-product-price">{{ i.price }}</span>
									</p>
								</td>
								<td class="cart-col-total col-md-1 hidden-xs hidden-sm">
									{% load page %}
									<span class="cart-product-price total">{% cheng i.num i.price %}</span>
								</td>

							</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div><!-- 购物清单信息列表 E-->
		</div>
		<!-- 结算详情 -->
		<div class="cart-footer" id="cartFooter">
			<div class="container">
			   <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">

				   <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
				   <span class="cart-footer-count">
						共
						<span class="cart-footer-num" id="totalCount"></span>
						件商品
				   </span>
				</div>
				<div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
					<span class="cart-footer-sum">

						<span class="cart-footer-num red" id="totalDiscount">0.00</span>
						<span class="cart-footer-text">合计(不含运费)：</span>
						<span class="cart-footer-total" id="totalPrice"></span>
					</span>

					<!--提交订单  订单session中有session -->
					<!--还需要收货信息.收货信息是有当前选中的.-->
					<form id="orderform" action="{% url 'ordercreate' %}" method="post" style="display:inline-block;">
						{% csrf_token %}
						<input type="hidden" name="addressid" value="">
					<button class="mz-btn success" id="cartSubmit">提交订单</button>
					</form>

				</div>
			</div>
		</div>
        <!-- 结算详情 E-->
	</div>
<!--订单地址end-->


<!--莫太框-->
<div class="shade_content" style="display: none;">
			<div class="col-xs-12 shade_colse">
				<button onclick="javascript:onclick_close();">x</button>
			</div>
			<div class="nav shade_content_div">
				<div class="col-xs-12 shade_title">
					新增收货地址
				</div>

				<div class="col-xs-12 shade_from">

					<!--表单提交到当前页,也必须是前一页携带参数那种-->
					<form action="" method="post" >
						{% csrf_token %}
						<div class="col-xs-12">
							<span class="span_style" id="">姓名</span>
							<input class="input_style" type="text" name="addname" id="region" placeholder="&nbsp;&nbsp;请输入您的姓名">
						</div>
						<div class="col-xs-12">
							<span class="span_style" id="">电话</span>
							<input class="input_style" type="text" name="addphone" id="number_this" placeholder="&nbsp;&nbsp;请输入您的手机号码">
						</div>
						<div class="col-xs-12">
							<span class="span_style" id="">地址</span>
							<input class="input_style" type="text" name="adds"  placeholder="&nbsp;&nbsp;请输入您的详细地址">
						</div>
						<div class="col-xs-12">
							<span class="span_style" id=""></span>
							<input type="checkbox" name="status" value="1" >是否设为默认地址
						</div>
						<div class="col-xs-12">
							<input class="btn_remove" type="button" id="" onclick="javascript:onclick_close();" value="取消">

							<button class="sub_set" onclick="" >提交</button>
						</div>
					</form>
				</div>
			</div>
		</div>
<!--莫太框end-->

{% endblock %}



{% block js %}

<script>
    //回顶部
    backTop();
    //全选
    allSelect();
    //商品数量加减
    cartAddMin();
    backTop();
    //顶部导航鼠标经过出现内容
    topNav();
    //登录图片鼠标经过
    topLogin();
    //
    leftNav();
	totalPrice();

	function totalPrice(){
		var total = 0
	//    each相当于遍历 对于每个选中的多选框进行遍历
		$('.cart-merchant-body .checked').each(function(){
			//span是行内标签 所以要使用text()函数获取写在里面的值
			//s = $(this).parents('.cart-merchant').find('.total').text()
			//获取一种商品的数量与价格的相乘总价
			p = $(this).parents('tr').find('.total').text()
			//获取所有选中的标签的价格总和
			//p需要转换类型 否则不能直接相加而相当于拼接
			total += Number(p)
		})

		  $('#totalPrice').text(total+'.00');
	}


    // 点击选择默认地址切换.
    $('.Caddress .add_mi').click(function() {
        $(this).css('background', 'url("./static/home/public/img/mail_1.jpg") no-repeat').siblings('.add_mi').css('background', 'url("./static/home/public/img/mail.jpg") no-repeat')
    })

    // 打开莫太框
    function onclick_open() {
        $(".shade_content").show();
        $(".shade").show();
        var input_out = $(".input_style");
        for (var i = 0; i <= input_out.length; i++) {
            if ($(input_out[i]).val() != "") {
                $(input_out[i]).val("");
            }
        }
    }

    // 关闭莫太框
    function onclick_close() {
        var shade_content = $(".shade_content");
        var shade = $(".shade");
        if (confirm("确认关闭么！此操作不可恢复")) {
            shade_content.hide();
            shade.hide();
        }
    }


    // 订单确认的页面主要是收货地址,订单信息过来的时候已经存入session中.
    // 只需要根据当前选中的信息, 把收货地址的id加到表单(最下面button按钮的),
    //  通过hidden隐藏域把addressid带过去.
     // post到生成订单页面去即可.没有点击就把默认的地址id加入表单.

    //把默认的地址给加入到hidden中(没有选的时候)
    var addressid = $('.add_mi[moren=1]').attr('addressid')
    $('input[name=addressid]').val(addressid)

    //点击选中
    $('.add_mi').click(function(){
    	addressid = $(this).attr('addressid')
    	$('input[name=addressid]').val(addressid)
    })



</script>

{% endblock %}



